<!--
 * @Description: 联系人
 * @Author: Lxc
 * @Date: 2021-09-10 14:39:29
 * @LastEditors: Lxc
 * @LastEditTime: 2021-09-13 17:53:17
-->
<template>
  <view>
    <view class="content page-content">
      <SearchBar ref="searchBar" class="page-header" />
      <view class="contacts-detail">
        <view class="detail-item" v-for="(item, index) of personList" :key="index">
          <view class="detail-cont">
            <image class="detail-img" src="@/static/images/contacts.png" alt="" />
            <view class="detail-label">
              <view class="detail-name">{{ item.label }}</view>
              <view class="detail-job">{{ item.mechanism }}/{{ item.department }}/{{ item.job }}</view>
            </view>
          </view>
          <image class="detail-phone" src="@/static/images/grey-phone.png"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SearchBar from "@/components/searchBar";
export default {
  components: { SearchBar },
  data() {
    return {
      nbTitle: "",
      personList: [
        {
          label: '王小明',
          mechanism: '末级机构',
          department: '末级部门',
          job: '职务',
        },
        {
          label: '王小明',
          mechanism: '末级机构',
          department: '末级部门',
          job: '职务',
        },
        {
          label: '王小明',
          mechanism: '末级机构',
          department: '末级部门',
          job: '职务',
        },
      ]
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.id == 1 ? "最近联系人" : "常用联系人"
    });
  },
};
</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-header {
  width: 100%;
}
.contacts-detail {
  width: 100%;
  height: 100%;
  padding: 0 32rpx;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #E4E7F0;
}
.detail-cont {
  display: flex;
  align-items: center;
}
.detail-img {
  width: 25.54rpx;
  height: 29.24rpx;
  margin-right: 34.46rpx;
}
.detail-label {
  padding: 25rpx 0;
}
.detail-name {
  font-size: 30rpx;
  color: #2b2b2b;
}
.detail-job {
  font-size: 24rpx;
  color: rgba(43, 43, 43, 0.5);
}
.detail-phone {
  width: 29.87rpx;
  height: 32.69rpx;
}
</style>
